var box = document.getElementById('box');
var small = document.getElementById('small');
var big = document.getElementById('big');
var bigImg = document.getElementById('bigImg');
small.onmousemove = function(e){
    var ev = e||window.event;
    //用大图片的宽度除以小div的宽度算出是放大几倍
    var scale = bigImg.offsetWidth/small.offsetWidth;
    

    //此地方就是重新定义move盒子的大小，其实就是放大move的大小
    move.style.width = big.offsetWidth/scale+"px";
    move.style.height = big.offsetHeight/scale+"px";

    //定义鼠标的位置
    var x = ev.clientX-move.offsetWidth/2-box.offsetLeft;
    var y = ev.clientY-move.offsetHeight/2-box.offsetTop;
    console.log(box.offsetLeft)
    //move的活动范围
    var maxW = small.offsetWidth-move.offsetWidth;
    console.log(maxW)
    var maxH = small.offsetHeight-move.offsetHeight;
    if(x<=0){
        x=0;
    }
    if(x>=maxW){
        x = maxW;
    }
    if(y<=0){
        y=0;
    }
    if(y>maxH){
        y=maxH;
    }
    move.style.left = x+"px";
    move.style.top = y+"px";
    bigImg.style.left = -x*scale+"px";
    bigImg.style.top = -y*scale+"px";
}